
<!--团购页面-->

<template>
  <div>
    <div style="position: relative;width: 1003px;margin: auto" v-if="showPrise">
      <img src="../assets/img/tgg1.jpg" alt="" width="100%">
      <img src="../assets/img/del.png" alt="" width="" style="position: absolute;right: 0px" @click="guan">
    </div>
    <div style="width: 1035px;margin: auto">
      <div class="multiTab" v-for="(item,index) in list" :key="index"  @click="$router.push('commodityPage')">
        <img :src="item.imgUrl" alt="">
        <a href="#" id="multiTab-a">{{item.title}}</a>
        <p id="multiTab-p">{{item.jj}}</p>
        <div style="position: absolute;top: 248px;left: 8px">
          <span id="multiTab-span1">团价￥{{item.num1}}</span>&nbsp; <span id="multiTab-span2">原价￥{{item.num2}}</span>
        </div>
        <div id="multiTab-div">已有{{item.num3}}人参与</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "multiPage",
  data(){
    return{
      list:[
          {imgUrl:require("../assets/img/tg01.jpg"),title:'[全国联保]德国2日',jj:'简介：德国，是一个中欧联邦会议共和制...',num1:8888,num2:15324,num3:3},
          {imgUrl:require("../assets/img/tg01.jpg"),title:'[全国联保]德国2日',jj:'简介：德国，是一个中欧联邦会议共和制...',num1:8888,num2:15324,num3:3},
          {imgUrl:require("../assets/img/tg01.jpg"),title:'[全国联保]德国2日',jj:'简介：德国，是一个中欧联邦会议共和制...',num1:8888,num2:15324,num3:3},
          {imgUrl:require("../assets/img/tg01.jpg"),title:'[全国联保]德国2日',jj:'简介：德国，是一个中欧联邦会议共和制...',num1:8888,num2:15324,num3:3},
          {imgUrl:require("../assets/img/tg01.jpg"),title:'[全国联保]德国2日',jj:'简介：德国，是一个中欧联邦会议共和制...',num1:8888,num2:15324,num3:3},
          {imgUrl:require("../assets/img/tg01.jpg"),title:'[全国联保]德国2日',jj:'简介：德国，是一个中欧联邦会议共和制...',num1:8888,num2:15324,num3:3},
      ],
      showPrise:true,
    }
  },
  methods:{
    guan:function (){
      this.showPrise=false;
    }
  }
}
</script>

<style scoped>
.multiTab{
  width: 312px;
  height: 300px;
  border: rgb(149, 219, 88) solid 1px;
  display: inline-block;
  margin: 8px;
  padding: 5px;
  position: relative;
}
#multiTab-a{
  color: #363636;font-weight:700;
  position: absolute;
  top: 208px;
  left: 8px;
}
#multiTab-p{
  color: #999;
  font-size: 12px;
  position: absolute;
  top: 232px;
  left: 8px;
}
#multiTab-div{
  background: rgb(149, 219, 88);
  color: #666;
  font-size: 11px;
  height: 20px;
  line-height: 20px;
  text-align: left;
  padding: 0 5px;
  position: absolute;
  width: 92%;
  top: 283px;
  left: 8px;
}
#multiTab-span1{
  font-weight: 700;
  font-size: 25px;
  color: red;
}
#multiTab-span2{

  font-size: 12px;
  color: #999;
}
</style>